<template>
  <view>
    <view class="goods-list">
      <block v-for="(goods, i) in goodsList" :key="i"><my-goods :goods="goods"></my-goods></block>
    </view>
  </view>
</template>

<script>
import {debounce} from 'lodash';
export default {
  name: 'GoodsListPage',
  components: {},
  data() {
    return {
      //查询的参数
      queryObj: {
        //搜索关键字
        query: '',
        //分类id
        cid: '',
        //当前页码
        pagenum: 1,
        //每条多少条
        pagesize: 10
      },
      goodsList: [], //商品列表
      total: 0, //总记录条数
      // 默认的空图片
      defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png'
    };
  },
  created() {},
  mounted() {},
  onLoad(options) {
    if (options.query) this.queryObj.query = options.query;
    if (options.cid) this.queryObj.cid = options.cid;
    this.getGoodsList();
  },
  //上拉触底
  onReachBottom() {
    this.getGoodsList();
  },
  //下拉刷新
  async onPullDownRefresh(){
    this.queryObj.pagenum = 1 
    this.total = 0
    this.goodsList = []
    await this.getGoodsList()
    uni.stopPullDownRefresh()
  },
  methods: {
    getGoodsList: debounce(async function() {
      if (this.goodsList.length === this.total && this.total !== 0) return;
      let {
        data: {
          message,
          meta: {status}
        }
      } = await uni.$http.get('/api/public/v1/goods/search', this.queryObj);
      if (status !== 200) {
        return this.$showMsg();
      }
      this.goodsList = [...this.goodsList, ...message.goods];
      this.queryObj.pagenum++;
      this.total = message.total;
    }, 1000)
  }
};
</script>

<style lang="scss">
.goods-item {
  display: flex;
  padding: 10px 5px;
  border-bottom: 1px solid #f0f0f0;

  .goods-item-left {
    margin-right: 5px;

    .goods-pic {
      width: 100px;
      height: 100px;
      display: block;
    }
  }

  .goods-item-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .goods-name {
      font-size: 13px;
    }

    .goods-price {
      font-size: 16px;
      color: #c00000;
    }
  }
}
</style>
